<template>
  <div class="step-two">
    <h3 class="pad-t-16 pad-b-15">提货点信息</h3>
    <div class="flex flex-between pick-up">
      <span class="font-w font-color-6">提货点类型</span>
      <div class="v-align-c" @click="pickupClick">
        <span class="mar-r-6" :class="{'font-color-9': !pickupName}">{{pickupName ? pickupName : '请选择'}}</span>
        <van-icon name="arrow" color="#999999" />
      </div>
      <div class="pick-up-tip" v-if="pickupTip">请选择提货类型</div>
    </div>
    <!-- 有门店时才展示 -->
    <template v-if="applyStore.isHasStore === 1 || storeApply">
      <h3 class="pad-t-20" v-if="applyStore.isHasStore === 1">营业执照</h3>
      <div class="mar-t-10" v-if="applyStore.isHasStore === 1">
        <div class="font-12">
          <span class="font-color-9">请确保证件信息完整清晰，上见国徽下见红章</span>
          <span class="mar-l-10 color-blue" @click="clickUpload('license', 'businessLicensePicUrl')">查看案例</span>
        </div>
        <div @click="clickUpload('license', 'businessLicensePicUrl')">
          <upload-image ref="license" text="添加营业执照" :imgSrc="businessLicensePicUrl" @uploadSuccess="licenseSuccess"></upload-image>
        </div>
      </div>
      <h3 class="pad-t-20">门店照片</h3>
      <div class="mar-t-10">
        <div class="font-12">
          <span class="font-color-9">请确保门店照片完整清晰，保证用户和物流司机可以找到您的提货点</span>
          <span class="mar-l-10 color-blue" @click="clickUpload('store', 'takeAddressPicUrl')">查看案例</span>
        </div>
        <div @click="clickUpload('store', 'takeAddressPicUrl')">
          <upload-image ref="store" text="添加门店照片" :imgSrc="takeAddressPicUrl" @uploadSuccess="storeSuccess"></upload-image>
        </div>
      </div>
    </template>
    <template v-else>
      <h3 class="pad-t-20">小区照片</h3>
      <div class="mar-t-10">
        <div class="font-12">
          <span class="font-color-9">请确保小区照片完整清晰，保证用户和物流司机可以找到您的提货点</span>
          <span class="mar-l-10 color-blue" @click="clickUpload('quarters', 'takeAddressPicUrl')">查看案例</span>
        </div>
        <div @click="clickUpload('quarters', 'takeAddressPicUrl')">
          <upload-image ref="quarters" text="添加小区照片" :imgSrc="takeAddressPicUrl" @uploadSuccess="quartersSuccess"></upload-image>
        </div>
      </div>
    </template>
    <!-- 提货点类型选择器 -->
    <van-popup
      :show="popupVisible"
      position="bottom"
      :round="true"
      @close="closePopup"
    >
      <van-picker :columns="columns" :default-index="pickupDefault" show-toolbar @confirm="pickupConfirm" @cancel="pickupCancel" />
    </van-popup>
    <!-- 示例弹窗 -->
    <upload-examples :show="showExamples" :textData="textData" @closeExamples="closeExamples" @continueUplaod="continueUplaod"></upload-examples>
  </div>
</template>
<script>
import UploadImage from './upload-image'
import UploadExamples from './upload-examples'
import { getTakeLocationTypeList } from '@/api/home'
export default {
  components: {
    UploadImage,
    UploadExamples
  },
  data() {
    return {
      takeTypeId: '',
      pickupName: '',
      businessLicensePicUrl: '',
      takeAddressPicUrl: '',
      quartersSrc: '',
      pickupIndex: '',
      popupVisible: false,
      showExamples: false,
      pickupTip: false,
      isHasStore: 0,
      columns: [],
      pickupDefault: '',
      licenseExamples: {
        title: '营业执照上传规则',
        correct: '/images/store-license-ex1.png',
        asks: [
          '1、请将营业执照放置在相机中心进行拍摄，保证信息照全',
          '2、营业执照上的文本信息要拍摄清晰'
        ],
        error: [{
          src: '/images/store-license-ex2.png',
          text: '方向颠倒营业执照'
        }, {
          src: '/images/store-license-ex3.png',
          text: '模糊营业执照'
        }, {
          src: '/images/store-license-ex4.png',
          text: '有水印营业执照'
        }]
      },
      storeExamples: {
        title: '门店照片上传规则',
        correct: '/images/store-store-ex1.png',
        asks: [
          '1、如您的店铺有招聘，请保证照片上能看到完整招牌、下能看 地面到',
          '2、如您的店铺无招牌，请拍摄完整清晰门头照',
          '3、为保证展示效果，请您于白天拍摄照片'
        ],
        error: [{
          src: '/images/store-store-ex2.png',
          text: '不完整门店'
        }, {
          src: '/images/store-store-ex3.png',
          text: '模糊门店'
        }, {
          src: '/images/store-store-ex4.png',
          text: '夜晚门店'
        }]
      },
      quartersExamples: {
        title: '小区照片上传规则',
        correct: '/images/store-quarters-ex1.png',
        asks: [
          '1、请拍摄清晰的小区入口照，图片中包括小区名称；',
          '2、为保证展示效果，请您于白天拍摄照片'
        ],
        error: [{
          src: '/images/store-quarters-ex2.png',
          text: '不完整小区'
        }, {
          src: '/images/store-quarters-ex3.png',
          text: '模糊小区'
        }, {
          src: '/images/store-quarters-ex4.png',
          text: '夜晚小区'
        }]
      },
      textData: {},
      uploadType: '',
      applyStore: {},
      storeApply: false
    }
  },
  mounted() {
    // 取出缓存的值
    this.storeApply = this.$pt.getStorageSync('store-apply') // 获取门店申请缓存，判断是申请门店还是申请团长
    let stepTwo = this.$pt.getStorageSync('applyStore') // 获取各个步骤缓存的申请的内容
    this.applyStore = stepTwo
    this.isHasStore = stepTwo.isHasStore === 1 ? 1 : 0
    this.takeTypeId = stepTwo.takeTypeId || ''
    this.pickupName = stepTwo.pickupName || ''
    this.businessLicensePicUrl = stepTwo.businessLicensePicUrl || ''
    this.takeAddressPicUrl = stepTwo.takeAddressPicUrl || ''
    this.quartersSrc = stepTwo.quartersSrc || ''
    this.pickupDefault = stepTwo.pickupIndex || ''
    this.getTakeLocationTypeList()
  },
  methods: {
    getTakeLocationTypeList() {
      // 获取提货点类型数据
      // 2：门店申请的话取 0，1：团长申请 0：无门店 1： 有门店
      let type = this.storeApply ? 2 : this.isHasStore
      getTakeLocationTypeList(type).then(response => {
        if (response.isError) return
        this.columns = response.data.map((item) => {
          let data = item
          data.text = item.takeTypeName
          return data
        })
      }).catch((
      ) => {})
    },
    pickupClick() {
      // 打开提货点类型弹窗
      this.popupVisible = true
    },
    closePopup() {
      // 关闭提货点类型弹窗
      this.popupVisible = false
    },
    closeExamples() {
      // 关闭示例窗口
      this.showExamples = false
    },
    clickUpload(type, e) {
      console.log(type, e)
      // 点击上传图片按钮
      switch (type) {
        case 'license':
          this.textData = this.licenseExamples
          break
        case 'store':
          this.textData = this.storeExamples
          break
        case 'quarters':
          this.textData = this.quartersExamples
          break
        default:
          break
      }
      this.uploadType = type
      // 如果没有选择图片，展示提示案例
      if (!this[e]) {
        this.showExamples = true
        return
      }
      this.chooseImage(type)
    },
    continueUplaod() {
      // 看完案例继续上传
      this.chooseImage(this.uploadType)
    },
    chooseImage(type) {
      // 调用组件的选择图片方法
      this.$refs[type].chooseImage()
    },
    licenseSuccess(res) {
      // 营业执照选择成功
      this.closeExamples()
      this.businessLicensePicUrl = res.tempFilePaths[0]
      this.changeValue()
    },
    storeSuccess(res) {
      // 营业执照选择成功
      this.closeExamples()
      this.takeAddressPicUrl = res.tempFilePaths[0]
      this.changeValue()
    },
    quartersSuccess(res) {
      // 小区照片选择成功
      this.closeExamples()
      this.takeAddressPicUrl = res.tempFilePaths[0]
      this.changeValue()
    },
    pickupConfirm(res) {
      // 提货点类型确认
      console.log(res)
      this.takeTypeId = res.mp.detail.value.takeTypeId
      this.pickupName = res.mp.detail.value.text
      this.pickupIndex = res.mp.detail.index
      this.changeValue()
      this.pickupTip = false
      this.popupVisible = false
    },
    pickupCancel() {
      // 提货点类型取消选择
      this.popupVisible = false
    },
    changeValue() {
      let params = {
        takeTypeId: this.takeTypeId,
        pickupName: this.pickupName,
        pickupIndex: this.pickupIndex,
        businessLicensePicUrl: this.businessLicensePicUrl,
        takeAddressPicUrl: this.takeAddressPicUrl,
        quartersSrc: this.quartersSrc
      }
      this.$emit('change', params)
    },
    checkData() {
      if (this.storeApply) {
        if (!this.takeTypeId) {
          this.pickupTip = true
          return false
        } else {
          return true
        }
      } else {
        if (!this.takeTypeId) {
          this.pickupTip = true
          return false
        } else if ((this.applyStore.isHasStore === 1) && !this.businessLicensePicUrl) {
          this.$utils.showToast({
            title: '请上传营业执照',
            duration: 3000
          })
          return false
        } else {
          return true
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.step-two{
  padding: 0 16px 40px;
  background-color: #FFF;
  h3{
    font-weight: bold;
    font-size: 20px;
  }
  .pick-up{
    font-size: 16px;
    margin-top: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #F5F5F5;
    position: relative;
    .pick-up-tip{
      position: absolute;
      right: 0;
      bottom: 5px;
      color: #FF1717;
      line-height: 13px;
      height: 13px;
      text-align: right;
      font-size: 12px;
    }
  }
  .color-blue{
    color: #0577FF;
  }
  /deep/.van-popup{
    border-radius: 15px 15px 0 0;
  }
}
</style>
